<script lang="ts" setup>
import { usePointStore } from '@/stores/point';
import type { studentInfo, tagForm } from '@/api/type';
import { reactive, ref } from 'vue';
import url1 from "@/assets/img/green.jpg";
import url2 from "@/assets/img/ha.jpg";
import url3 from "@/assets/img/bq.jpg";
import url4 from "@/assets/img/login.jpg";
// 主要内容
const tags = reactive<tagForm[]>(usePointStore().tag);
const picture = reactive([
    { url: url1 },
    { url: url2 },
    { url: url3 },
    { url: url4 },
])
</script>
<template>
    <div class="main">
        <el-card class="tag">
            <p style="font-weight: bold;"> 课程分类</p>
            <el-divider />
            <el-scrollbar style="height:300px ;">
                <p v-for="item in tags" :key="item.id">{{ item.name }}</p>
            </el-scrollbar>
        </el-card>
        <div class="picture">
            <el-carousel height="420px">
                <el-carousel-item v-for="item in picture" :key="item">
                    <el-image style="height: 100%;width: 100%;" :src="item.url" fit="cover" />
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<style scoped>
.main {
    /* background-color: cornsilk; */
    display: flex;
    justify-content: center;
}

.tag {
    width: 15%;
    height: 420px;
    /* background-color: aqua; */
    margin-right: 20px;
    border-radius: 3%;

}

.picture {
    width: 50%;
    /* background-color: cornflowerblue; */
}
</style>
